<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>macos dock效果</title>
  <style>
    :root {
      font-size: 16px;
    }

    body {
      margin: 0;
      padding: 0;
      width: 100%;
      min-height: 100vh;
      overflow: hidden;
      display: flex;

      align-items: flex-end;
      background-image: linear-gradient(109.6deg, rgba(25, 170, 209, 1) 11.3%, rgba(21, 65, 249, 1) 69.9%);

    }

    .glass {
      width: 100%;
      height: 8rem;
      background: rgba(255, 255, 255, 0.25);
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      display: flex;
      justify-content: center;
    }

    .dock {
      --scale: 1;
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .dock li {
      font-size: calc(6rem * var(--scale));
      padding: 0 .5rem;
      cursor: default;

      position: relative;
      top: calc((6rem * var(--scale) - 6rem) / 2 * -1);

      transition: 15ms all ease-out;
    }

    .dock li.loading {
      animation: 1s loading ease-in infinite;
    }

    @keyframes loading {

      0%,
      100% {
        transform: translate(0px);
      }

      60% {
        transform: translateY(-40px);
      }

    }
  </style>
</head>

<body>
  <div class="glass">
    <ul class="dock">
      <li>😃</li>
      <li>😊</li>
      <li>😜</li>
      <li>😍</li>
      <li>🤩</li>
      <li>🥳</li>
      <li>🥶</li>
    </ul>
  </div>

  <script>
    document.querySelectorAll('.dock li').forEach(li => {
      li.addEventListener('click', e => {
        e.currentTarget.classList.add('loading')
      })

      li.addEventListener('mousemove', e => {
        let item = e.target
        let itemRect = item.getBoundingClientRect()
        // getBoundingClientRect.left：元素左边到视窗左边的距离;\
        // offset 为0的时候鼠标在图标的左边界，offset为1的时候鼠标在图标的右边边界
        let offset = Math.abs(e.clientX - itemRect.left) / itemRect.width


        let prev = item.previousElementSibling || null
        let next = item.nextElementSibling || null

        let scale = 0.6

        resetScale() // 鼠标mousemove进来的时候 先把所有item的scale重制为1

        if (prev) {
          //关键 是这个公式
          prev.style.setProperty('--scale', 1 + scale * Math.abs(offset - 1))
        }

        item.style.setProperty('--scale', 1 + scale)

        if (next) {
          next.style.setProperty('--scale', 1 + scale * offset)
        }

      })
    })

    document.querySelector('.dock').addEventListener('mouseleave', e => {
      resetScale()
    })

    function resetScale() {
      document.querySelectorAll('.dock li').forEach(li => {
        li.style.setProperty('--scale', 1)
      })
    }
  </script>
</body>

</html>